import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class SVGSequence extends Component {

  constructor(props) {
    super(props);

    this.state = {
      currentFrame: 0,
      fps: 25,
      frameName: 'Frame',
      totalFrames: 0,
      playing: false
    }
  }

  hideAllFrames(totalFrames) {
    for (let i = 0; i < totalFrames; i++) {
      this.frames.childNodes[i].style.display = 'none';
    }
  }

  resetAnim() {
    clearTimeout(this.timeout);
    window.cancelAnimationFrame(this.frameRequest);

    this.hideAllFrames();
    this.setState({ currentFrame: 0 });
  }

  componentWillReceiveProps(nextProps) {
    const { paused } = nextProps;

    if (!paused && !this.state.playing) {
      this.resetAnim();
      this.anim();
    }
  }

  componentDidMount() {
    const { paused } = this.props;
    const totalFrames = this.frames.childNodes.length;

    this.hideAllFrames(totalFrames);

    if (paused) {
      this.goToFrame(totalFrames);
    } else {
      this.anim();
      this.resetAnim();
    }

    this.setState({ totalFrames });
  }

  componentWillUnmount() {
    this.resetAnim();
  }

  goToFrame(frameNumber) {
    this.setState({ currentFrame: frameNumber });
    window.cancelAnimationFrame(this.frameRequest);
    this.frameRequest = window.requestAnimationFrame(() => {
      this.hideAllFrames(this.state.totalFrames);
      this.frames.getElementById(this.state.frameName+frameNumber).style.display = 'inline-block';
    });
  }

  anim() {
    this.setState({ playing: true });

    this.timeout = setTimeout(() => {
      this.goToFrame(this.state.currentFrame + 1);
      if (this.state.currentFrame < this.state.totalFrames && this.state.playing) {
        this.anim();
      } else {
        this.setState({ playing: false });

        if (this.props.loop) {
          this.setState({ currentFrame: 0 });
          this.anim();
        }
      }
    }, 1000 / this.state.fps);
  }

  render() {
    const { name, color } = this.props;

    let colours;
    if (color) {
      colours = color;
    } else {
      colours = ['#6114CC', '#FA7D78'];
    }

    let frames;
    if (name === 'icon-ring') {
      frames = menuIconRingSequence(this, colours);
    }

    return (
      <div className="svg-sequence">
        {frames}
      </div>
    )
  }
};

export default SVGSequence;

function menuIconRingSequence(component, colours) {
  return (
    <svg className="navigation-toggle-ring" ref={(ref) => component.frames = ref} title="menu ring" role="img" viewBox="0 0 46 46">
      <g id="Frame1">
        <defs>
          <linearGradient id="menu-ring-gradient">
            <stop offset="0%" stopColor={colours[0]} />
            <stop offset="100%" stopColor={colours[1]} />
          </linearGradient>
        </defs>
        <path fill="url(#menu-ring-gradient)" d="M34.62,13.15c4.59-1.52,7.82-1.71,8.44-.74,1.3,2-5.76,9.49-16.14,15.78S6.44,37.39,5.11,35.33c-.57-.89.85-3.45,4.06-6.65,0,0-.39-.88-.53-1.3S8.33,26,8.33,26C3.61,30.43,1.43,34.22,3,36.68c2.51,3.9,13.49.75,25.2-6.35S47.71,15,45.16,11.06c-1.46-2.27-5.5-2.21-11.06-.38,0,0-1.16.43-.61,1.39S34.32,13.19,34.62,13.15Z" />
      </g>
      <g id="Frame2">
        <path fill="url(#menu-ring-gradient)" d="M40.54,9.34c2.21-.08,3.81.47,4.62,1.72C47.71,15,39.95,23.22,28.21,30.33S5.52,40.58,3,36.68C1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33c1.33,2.06,11.39-.82,21.8-7.13S44.36,14.43,43.06,12.41c-.39-.61-1.81-.77-4-.42C39.11,12,38.49,9.5,40.54,9.34Z" />
      </g>
      <g id="Frame3">
        <path fill="url(#menu-ring-gradient)" d="M43.06,12.41c1.3,2-5.76,9.49-16.14,15.78S6.44,37.39,5.11,35.33c-.57-.89.85-3.45,4.06-6.65,0,0-.39-.88-.53-1.3S8.33,26,8.33,26C3.61,30.43,1.43,34.22,3,36.68c2.51,3.9,13.49.75,25.2-6.35,10.66-6.46,18-13.83,17.39-18.08,0,0-.67-1.45-3.29-.41A1.9,1.9,0,0,1,43.06,12.41Z" />
      </g>
      <g id="Frame4">
        <path fill="url(#menu-ring-gradient)" d="M42.69,14.59c-1.76,3.22-7.78,8.76-15.77,13.6-10.41,6.31-20.47,9.19-21.8,7.13-.57-.89.85-3.45,4.06-6.65,0,0-.39-.88-.53-1.3S8.33,26,8.33,26C3.61,30.43,1.43,34.22,3,36.68c2.51,3.9,13.49.75,25.2-6.35,7.77-4.71,13.79-9.9,16.24-14A1.39,1.39,0,0,0,44,14.87C43.28,14.11,43.06,14.22,42.69,14.59Z" />
      </g>
      <g id="Frame5">
        <path fill="url(#menu-ring-gradient)" d="M38.51,22.95a75.34,75.34,0,0,1-10.3,7.39C16.5,37.43,5.52,40.58,3,36.68,1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33c1.33,2.06,11.39-.82,21.8-7.13a73.05,73.05,0,0,0,10.32-7.5s.7-.77,1.21.44S38.84,22.66,38.51,22.95Z" />
      </g>
      <g id="Frame6">
        <path fill="url(#menu-ring-gradient)" d="M31.63,28.16q-1.64,1.1-3.42,2.18C16.5,37.43,5.52,40.58,3,36.68,1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33c1.33,2.06,11.39-.82,21.8-7.13,1.19-.72,2.33-1.45,3.42-2.19a.85.85,0,0,1,1.21.44A1.61,1.61,0,0,1,31.63,28.16Z" />
      </g>
      <g id="Frame7">
        <path fill="url(#menu-ring-gradient)" d="M29,29.86l-.78.48C16.5,37.43,5.52,40.58,3,36.68,1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33c1.33,2.06,11.39-.82,21.8-7.13l.81-.5a1,1,0,0,1,1.26.48C29.4,29,29.28,29.68,29,29.86Z" />
      </g>
      <g id="Frame8">
        <path fill="url(#menu-ring-gradient)" d="M22.61,33.46C13.17,38.27,5.12,39.95,3,36.68,1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33c1.1,1.7,8.11,0,16.37-4.11,0,0,.61-.3,1,.65S22.81,33.36,22.61,33.46Z" />
      </g>
      <g id="Frame9">
        <path fill="url(#menu-ring-gradient)" d="M14.7,36.86C8.92,38.83,4.49,39,3,36.68,1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33c.73,1.13,4.07.78,8.66-.81a1,1,0,0,1,1.28.72C15.36,36.23,14.94,36.78,14.7,36.86Z" />
      </g>
      <g id="Frame10">
        <path fill="url(#menu-ring-gradient)" d="M12.05,37.66c-4.47,1.16-7.8,1-9-1C1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33s2.94.86,6.29-.07c0,0,.72,0,1,.93S12.26,37.61,12.05,37.66Z" />
      </g>
      <g id="Frame11">
        <path fill="url(#menu-ring-gradient)" d="M6,38.29a4,4,0,0,1-3-1.61C1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33c.34.52,1.22.73,2.53.64,0,0,1.18-.42.2,1.2A1.81,1.81,0,0,1,6,38.29Z" />
      </g>
      <g id="Frame12">
        <path fill="url(#menu-ring-gradient)" d="M3.83,37.52A3,3,0,0,1,3,36.68C1.43,34.22,3.61,30.43,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6,31.87,4.54,34.44,5.11,35.33A2.11,2.11,0,0,0,6.88,36s.48.37-.31.87A3.49,3.49,0,0,1,3.83,37.52Z" />
      </g>
      <g id="Frame13">
        <path fill="url(#menu-ring-gradient)" d="M2.61,33.94C3.08,31.74,5.11,29,8.33,26c0,0,.18.94.32,1.36s.53,1.3.53,1.3C6.33,31.5,4.89,33.84,5,35,5,35,4.38,36.11,2.61,33.94Z" />
      </g>
      <g id="Frame14">
        <path fill="url(#menu-ring-gradient)" d="M35.89,12.75c-.49.15-1,.31-1.53.49,0,0-.57-.65-.9-1s-1.1-1-1.1-1q1.19-.44,2.3-.79s.87-.41,1.23.75S36.11,12.68,35.89,12.75Z" />
        <path fill="url(#menu-ring-gradient)" d="M5.23,33.84a18.14,18.14,0,0,1,3.94-5.16s-.39-.88-.53-1.3S8.33,26,8.33,26A22.39,22.39,0,0,0,3,32.63s0,.57.71.88S5.08,34.18,5.23,33.84Z" />
      </g>
      <g id="Frame15">
        <path fill="url(#menu-ring-gradient)" d="M5.57,28.85A36.77,36.77,0,0,1,8.33,26s.18.94.32,1.36.53,1.3.53,1.3c-.65.64-1.22,1.26-1.72,1.85a1.18,1.18,0,0,1-1.23-.33C5.63,29.59,5.33,29.14,5.57,28.85Z" />
        <path fill="url(#menu-ring-gradient)" d="M42.31,9.43c-2.36-.37-5.8.31-10,1.86,0,0,.77.64,1.1,1s.9,1,.9,1c4.73-1.6,8.07-1.82,8.71-.82A1.88,1.88,0,0,0,42.31,9.43Z" />
      </g>
      <g id="Frame16">
        <path fill="url(#menu-ring-gradient)" d="M42.55,14.84c.64-1.08.84-1.92.51-2.43-.64-1-4-.78-8.71.82,0,0-.57-.65-.9-1s-1.1-1-1.1-1c6.46-2.4,11.2-2.73,12.81-.23a4.08,4.08,0,0,1,0,3.88s-.25.66-1.55.55S42.55,14.84,42.55,14.84Z" />
      </g>
      <g id="Frame17">
        <path fill="url(#menu-ring-gradient)" d="M37.6,20.37c4.06-3.65,6.23-6.77,5.46-8-.64-1-4-.78-8.71.82,0,0-.57-.65-.9-1s-1.1-1-1.1-1c6.46-2.4,11.2-2.73,12.81-.23s-.81,6.54-5.65,11c0,0-.54.31-1.37-.38S37.43,20.53,37.6,20.37Z" />
      </g>
      <g id="Frame18">
        <path fill="url(#menu-ring-gradient)" d="M33.36,23.85c6.68-5,10.71-9.88,9.7-11.44-.64-1-4-.78-8.71.82,0,0-.57-.65-.9-1s-1.1-1-1.1-1c6.46-2.4,11.2-2.73,12.81-.23,2,3-2.17,8.59-9.52,14.23a1.71,1.71,0,0,1-1.47-.4C33.38,24.28,33.14,24,33.36,23.85Z" />
      </g>
      <g id="Frame19">
        <path fill="url(#menu-ring-gradient)" d="M17.62,35.76a80.56,80.56,0,0,0,10.59-5.43C39.95,23.22,47.71,15,45.16,11.06c-1.61-2.5-6.34-2.17-12.81.23,0,0,.77.64,1.1,1s.9,1,.9,1c4.73-1.6,8.07-1.82,8.71-.82,1.3,2-5.76,9.49-16.14,15.78a74.74,74.74,0,0,1-11,5.52s-.58.38.14,1.1S17,36,17.62,35.76Z" />
      </g>
      <g id="Frame20">
        <path fill="url(#menu-ring-gradient)" d="M8.41,38.32c4.87-.47,12.18-3.36,19.8-8C39.95,23.22,47.71,15,45.16,11.06c-1.61-2.5-6.34-2.17-12.81.23,0,0,.77.64,1.1,1s.9,1,.9,1c4.73-1.6,8.07-1.82,8.71-.82,1.3,2-5.76,9.49-16.14,15.78-7.37,4.47-14.57,7.22-18.62,7.71A1.35,1.35,0,0,0,8,37.16C8.09,38.08,8.18,38.27,8.41,38.32Z" />
      </g>
      <g id="Frame21">
        <path fill="url(#menu-ring-gradient)" d="M5,38.06c4.28,1.35,13.51-1.82,23.26-7.73C39.95,23.22,47.71,15,45.16,11.06c-1.61-2.5-6.34-2.17-12.81.23,0,0,.77.64,1.1,1s.9,1,.9,1c4.73-1.6,8.07-1.82,8.71-.82,1.3,2-5.76,9.49-16.14,15.78C17.16,34.11,7.7,37,5.46,35.66c0,0-.42-.26-.73.56S4.31,37.83,5,38.06Z" />
      </g>
      <g id="Frame22">
        <path fill="url(#menu-ring-gradient)" d="M3.19,32.31C2.36,34,2.25,35.5,3,36.68c2.51,3.9,13.49.75,25.2-6.35S47.71,15,45.16,11.06c-1.61-2.5-6.34-2.17-12.81.23,0,0,.77.64,1.1,1s.9,1,.9,1c4.73-1.6,8.07-1.82,8.71-.82,1.3,2-5.76,9.49-16.14,15.78S6.44,37.39,5.11,35.33c-.29-.46-.06-1.36.67-2.56,0,0,.43-.84-.8-1A1.93,1.93,0,0,0,3.19,32.31Z" />
      </g>
      <g id="Frame23">
        <path fill="url(#menu-ring-gradient)" d="M4.38,30.36C2.55,32.9,2,35.08,3,36.68c2.51,3.9,13.49.75,25.2-6.35S47.71,15,45.16,11.06c-1.61-2.5-6.34-2.17-12.81.23,0,0,.77.64,1.1,1s.9,1,.9,1c4.73-1.6,8.07-1.82,8.71-.82,1.3,2-5.76,9.49-16.14,15.78S6.44,37.39,5.11,35.33c-.37-.58.1-1.86,1.36-3.57,0,0,.39-.55-.66-1.22S4.38,30.36,4.38,30.36Z" />
      </g>
      <g id="Frame24">
        <path fill="url(#menu-ring-gradient)" d="M7,27.3c-3.8,3.86-5.43,7.17-4,9.38,2.51,3.9,13.49.75,25.2-6.35S47.71,15,45.16,11.06c-1.61-2.5-6.34-2.17-12.81.23,0,0,.77.64,1.1,1s.9,1,.9,1c4.73-1.6,8.07-1.82,8.71-.82,1.3,2-5.76,9.49-16.14,15.78S6.44,37.39,5.11,35.33c-.55-.85.74-3.26,3.71-6.29,0,0,.35-.26-.42-1.41S7,27.3,7,27.3Z" />
      </g>
      <g id="Frame25">
        <path fill="url(#menu-ring-gradient)" d="M34.35,13.24c4.73-1.6,8.07-1.82,8.71-.82,1.3,2-5.76,9.49-16.14,15.78S6.44,37.39,5.11,35.33c-.57-.89.85-3.45,4.06-6.65,0,0-.39-.88-.53-1.3S8.33,26,8.33,26C3.61,30.43,1.43,34.22,3,36.68c2.51,3.9,13.49.75,25.2-6.35S47.71,15,45.16,11.06c-1.61-2.5-6.34-2.17-12.81.23,0,0,.77.64,1.1,1S34.35,13.24,34.35,13.24Z" />
      </g>
    </svg>
  );
};
